<template>
    <!-- 多语言的弹框 -->
    <el-drawer
    v-model="dialogVisible" :title="store.appFront.languageSelect" width="500px">
        
    <div 
    style="position: absolute;"
    >
        <!-- 搜索框 -->
        <el-input :placeholder="store.appFront.search" size="large" v-model="searchText" @input="searchInput"></el-input>
        <!-- 分割 -->
        <el-divider></el-divider>

        <!-- 多语言的数据 -->
        <el-scrollbar height="calc(100vh - 260px)">

            <div style="padding: 20px;box-sizing: border-box;">

                <div @click="selectLanguage(item)"
                    :class="`language-box ${item.code === store.languageCode  ? 'language-box-selected' : ''}`"
                    v-for="(item, index) in languagesOfSearch" :key="index">
                    <span class="language-box-name">{{ item.name }}</span>
                    <span class="language-box-code">{{ item.code }}</span>
                </div>

            </div>

        </el-scrollbar>
    </div>
    </el-drawer>
</template>

<script lang="ts" setup>
import { useStore } from '@/stores/counter';
import { onMounted, ref, defineExpose, toRefs } from 'vue';
import $kt from '@/vueKantboot';

let store = useStore();


let dialogVisible = ref(false);


let searchText = ref('');

const open = () => {
    // 显示多语言的弹框
    dialogVisible.value = true;
}

const close = () => {
    // 隐藏多语言的弹框
    dialogVisible.value = false;
}

/**
 * 多语言的数据
 * @name: languages
 * @description: 多语言的数据
 */
let languages = ref(
    [
        {
            "baiduTranslateCode": "ara",
            "code": "ar-AE",
            "description": "阿拉伯语 (阿联酋)",
            "gmtCreate": "2023-04-09 20:17:45",
            "gmtModified": "2023-04-09 20:17:45",
            "id": 2,
            "name": "العربية (الإمارات العربية المتحدة)",
            "support": true
        },
    ]
);

/**
 * 多语言的数据
 * @name: languagesOfSearch
 * @description: 多语言的数据
 */
let languagesOfSearch = ref(
    [
        {
            "baiduTranslateCode": "ara",
            "code": "ar-AE",
            "description": "阿拉伯语 (阿联酋)",
            "gmtCreate": "2023-04-09 20:17:45",
            "gmtModified": "2023-04-09 20:17:45",
            "id": 2,
            "name": "العربية (الإمارات العربية المتحدة)",
            "support": true
        },
    ]
);

/**
 * 显示多语言的弹框
 * @name: showDialog
 * @description: 显示多语言的弹框
 */
let showDialog = () => {
    // 显示多语言的弹框
    dialogVisible.value = true;
}

/**
 * 获取多语言的数据
 * @name: getLanguages
 * @description: 获取多语言的数据
 */
let getLanguages = () => {
    // 发送请求
    $kt.request.request({
        url: '/system/language/getLanguages',
        method: 'post'
    }).then((res: any) => {
        // 获取多语言的数据
        languages.value = res.data.data;
        languagesOfSearch.value = res.data.data;
    })
}


/**
 * 搜索框的输入事件
 * @name: searchInput
 * @description: 搜索框的输入事件
 */
let searchInput = () => {

    if (searchText.value == '') {
        languagesOfSearch.value = languages.value;
        return false;
    }

    // 清空多语言的数据
    languagesOfSearch.value = [];

    // 循环多语言的数据，判断languages的name是否包含searchText的值
    for (let i = 0; i < languages.value.length; i++) {
        // 判断是否包含
        if (languages.value[i].name.toUpperCase().indexOf(searchText.value.toUpperCase()) != -1) {
            // 添加到多语言的数据
            languagesOfSearch.value.push(languages.value[i]);
        }
    }

    // 循环多语言的数据，判断languages的code的大写是否包含searchText的大写值
    for (let i = 0; i < languages.value.length; i++) {
        // 判断是否包含
        if (languages.value[i].code.toUpperCase().indexOf(searchText.value.toUpperCase()) != -1) {
            // 添加到多语言的数据
            languagesOfSearch.value.push(languages.value[i]);
        }
    }


    // 按照languagesOfSearch的code进行排序
    languagesOfSearch.value.sort((a: any, b: any) => {
        return a.code.localeCompare(b.code);
    })




}

onMounted(() => {
    // 获取多语言的数据
    getLanguages();
})



/**
 * 选择多语言
 * @name: selectLanguage
 * @description: 选择多语言
 */
let selectLanguage = (item: any) => {

    // 设置语言编码
    $kt.i18n.setLanguageCode(item.code);

    // 判断语言编码是否相同
    if (item.code == store.languageCode ) {
        // 如果相同，直接取消
        return false;
    }
    store.languageCode = item.code;
    store.setLanguageCode(item.code);
}

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.language-box {
    padding: 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: lighter;
    

    .language-box-name {
        font-size: 14px;
        color: #333;
        
    }

    .language-box-code {
        font-size: 10px;
        color: #666;
        float: right;
    }

    &:hover {
        background-color: #f5f5f5;
    }
}

.language-box-selected {
    border: 1px solid #999;
}


</style>